<script lang="ts" setup>
import type { RowType } from '../../types';

import type { VxeGridProps } from '#/adapter/vxe-table';

import { useVbenDrawer, useVbenModal } from '@vben/common-ui';

import { Button, Space } from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getThemesFiles } from '#/api/admin/theme';
import Icon from '#/components/Icons';
import { sortByField } from '#/utils';

import FileWidgetsConfigDrawerView from './FileWidgetsConfigDrawer.vue';

const modalID = ref();
const [TableModal, modalApi] = useVbenModal();

const gridOptions: VxeGridProps<RowType> = {
  rowConfig: {
    useKey: true,
    isHover: true,
  },
  columnConfig: {
    useKey: true,
  },
  columns: [
    { title: '序号', type: 'seq', width: 50 },
    { field: 'name', title: '文件名称' },
    { field: 'action', title: '操作名' },
    { field: 'file', title: '文件路径' },
    { field: 'description', title: '描述' },
    {
      slots: { default: 'action' },
      fixed: 'right',
      title: '操作',
      width: 180,
    },
  ],
  exportConfig: {},
  pagerConfig: {
    enabled: false,
  },
  keepSource: true,
  proxyConfig: {
    ajax: {
      query: async () => {
        const modalData = modalApi.getData();
        modalID.value = modalData.theme;
        const { data } = await getThemesFiles(modalData.theme);
        data.list = sortByField(data.list, 'list_order');
        return data;
      },
    },
  },
};

const [Grid] = useVbenVxeGrid({
  gridOptions,
});
const [FileWidgetsConfigDrawer, FileWidgetsConfigDrawerApi] = useVbenDrawer({
  // 连接抽离的组件
  connectedComponent: FileWidgetsConfigDrawerView,
});
const openDialog = async (row?: any | RowType) => {
  FileWidgetsConfigDrawerApi.setState({
    title: `${row.name}文件设计`,
  });
  FileWidgetsConfigDrawerApi.setData(row);

  FileWidgetsConfigDrawerApi.open();
};
</script>
<template>
  <TableModal :footer="false" class="w-3/5">
    <FileWidgetsConfigDrawer />
    <Grid>
      <template #action="{ row }">
        <Space>
          <Button type="primary" @click="openDialog(row)">
            <template #icon>
              <span class="anticon">
                <Icon icon="ri:brush-line" />
              </span>
            </template>
            设计
          </Button>
        </Space>
      </template>
    </Grid>
  </TableModal>
</template>
